import React from 'react';
import { Tree } from 'antd';

const LayersTree = ({ treeData, toggle }) => {
  const data = treeData || [
    {
      title: '光谷智慧交通',
      key: '0-0',
      children: [
        {
          title: 'parent 1-0',
          key: '0',
        },
        {
          title: 'parent 1-1',
          key: '1',
        },
      ],
    },
  ];
  const onSelect = (selectedKeys, info) => {};

  const onCheck = (checkedKeys, info) => {
    // 获得勾选的key即要显示的key

    let showKeys = checkedKeys.filter((item) => item != '0-0');

    let allKeys = data[0].children.map((item) => item.key);
    let hidenKeys = allKeys.filter((item) => !checkedKeys.includes(item));

    toggle(showKeys, hidenKeys);
  };
  return (
    <div className="layers-tree">
      <Tree
        checkable
        defaultExpandedKeys={['0-0']}
        defaultSelectedKeys={[]}
        defaultCheckedKeys={['0-0']}
        onSelect={onSelect}
        onCheck={onCheck}
        treeData={data}
        style={{
          background: 'rgb(0, 21, 41)',
          color: 'rgb(166, 173, 172)',
          fontSize: '16px',
          height: '90vh',
        }}
      />
    </div>
  );
};

export default LayersTree;
